<template>
  <div class="app-container home">
    <el-row :gutter="24">
      <el-col :sm="24">
        <h2>考生信息导入</h2>
        <el-steps :active="active" finish-status="success">
          <el-step title="考生报名信息"></el-step>
          <el-step title="考生平时成绩"></el-step>
          <el-step title="考生游泳成绩"></el-step>
          <el-step title="考生照片信息"></el-step>
          <el-step title="考生信息核对"></el-step>
          <el-step title="导入完成"></el-step>
        </el-steps>
      </el-col>
      <el-col :sm="24" style="text-align: center; color: #c01117">
        <br>
        {{resultMsg}}
        <br>
      </el-col>
      <el-col :sm="24" align="middle" v-loading="loading" >
        <el-upload id="importUpload"
          class="upload-demo"
          drag
          :show-file-list=false
          :on-success="importDbfSuccess"
          :on-error="importDbfError"
          :accept="importAccept"
          :on-progress="importProgress"
          :action="url">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{upload__text}}</div>
          <div class="el-upload__tip" slot="tip">{{upload__tip}}</div>
        </el-upload>
        <el-button style="margin-top: 12px;" @click="previous" v-if="active != 0 && active != 6">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active != 6">下一步</el-button>
        <el-button style="margin-top: 12px;" @click="again" v-if="active == 6">重新导入</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    uploadStatus, checkInfo, checkInfoProgress
  } from '@/api/business/import/candidateImport'

  export default {
    name: 'candidateImport',
    data() {
      return {
        // 遮罩层
        loading: false,
        active: 0,
        url: '/' + this.$store.state.settings.prefix + '/business/candidates/importDbf',
        upload__text: '点击这里或拖放学生信息DBF文件到这里上传',
        upload__tip: '仅支持.dbf文件',
        resultMsg: '',
        importAccept: '.dbf'
      }
    },

    methods: {
      previous() {
        this.active--
        this.changeActive()
      },
      next() {
        this.active++
        this.changeActive()
        if (this.active === 4) {
          this.active = this.active + 2
        }
      },
      again() {
        this.active = 0
        this.changeActive()
      },
      importProgress() {
        this.loading = true
      },
      //文件上传异常结果
      importDbfError(err, file, fileList) {
        this.loading = false
        this.resultMsg = '文件导入失败，失败原因：' + err.msg
      },
      //文件上传成功结果
      importDbfSuccess(response, file, fileList) {
        this.loading = false
        if (response.status != 'success') {
          this.resultMsg = '文件导入失败,返回原因：' + response.message
          return
        }
        uploadStatus().then(response => {
          if (response.status == 'success') {
            this.resultMsg = response.data.message
          }
        })
      },
      changeActive() {
        if (this.active === 0) {
          this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importDbf'
          this.upload__text = '点击这里或拖放学生信息DBF文件到这里上传'
          this.upload__tip = '仅支持.dbf文件'
          this.importAccept = '.dbf'
          document.getElementById('importUpload').style.display = 'block'
        }
        if (this.active === 1) {
          this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importUsualResults'
          this.upload__text = '点击这里或拖放学生平时成绩DBF文件到这里上传'
          this.upload__tip = '仅支持.dbf文件'
          this.importAccept = '.dbf'
        }
        if (this.active === 2) {
          this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importSwimResults'
          this.upload__text = '点击这里或拖放学生游泳成绩DBF文件到这里上传'
          this.upload__tip = '仅支持.dbf文件'
          this.importAccept = '.dbf'
        }
        if (this.active === 3) {
          this.url = '/' + this.$store.state.settings.prefix + '/business/candidates/importZip'
          this.upload__text = '点击这里或拖放学生照片zip文件到这里上传'
          this.upload__tip = '仅支持.zip文件'
          this.importAccept = '.zip'
        }
        if (this.active === 4) {
          document.getElementById('importUpload').style.display = 'none'

          checkInfo().then(response => {
          })
          checkInfoProgress().then(response => {
            if (response.status != 'success') {
              this.resultMsg = response.message
            } else {
              this.resultMsg = '导入完成'
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
